<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form >
    <input type="text" name="bookName" id="key">
    <input type="submit" onclick="return search()"/>
</form>
<script type="text/javascript">

    function filltable(books){

        table = document.getElementById("booklist");

        for ( i=0;i<books.length;i++){
            line = document.createElement("tr")

            cell = document.createElement("td")
            node = document.createTextNode(books[i].bookId)
            cell.appendChild(node)
            line.appendChild(cell)
            cell = document.createElement("td")
            node = document.createTextNode(books[i].bookName)
            cell.appendChild(node)
            line.appendChild(cell)
            cell = document.createElement("td")
            node = document.createTextNode(books[i].price)
            cell.appendChild(node)
            line.appendChild(cell)
            cell = document.createElement("td")
            node = document.createTextNode(books[i].bookAuthor)
            cell.appendChild(node)
            line.appendChild(cell)

            table.append(line)
        }
    }

    function search(){
        key = document.getElementById("key").value
        xmlhttp=new XMLHttpRequest();
        xmlhttp.onreadystatechange=function()
        {
            if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
                text=JSON.parse(xmlhttp.responseText)
                filltable(text)
            }
        }
        xmlhttp.open("GET","book?bookName="+key,true);
        xmlhttp.send()
        return false
    }
</script>
<table border="1px" id="booklist">


</table>
</body>

</html>